<template>

  <div>


    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content>
        <dic-list-select v-model="listQuery.params.reviewState" dic-code="exam_review_state" title="阅卷状态" class="filter-item" width="200"/>
        <el-input v-model="listQuery.params.title" size="small" class="filter-item" style="width: 200px; margin-left: 10px" placeholder="考试名称"/>
        <el-date-picker
          v-model="listQuery.params.startTime"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="考试开始时间"
          size="small"
        />

        <el-date-picker
          v-model="listQuery.params.endTime"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="考试结束时间"
          size="small"
        />
      </template>


      <template #data-columns>

        <el-table-column
          label="考试名称"
          show-overflow-tooltip
        >

          <template v-slot="scope">
            {{ scope.row.title }}
          </template>

        </el-table-column>

        <el-table-column
          label="协作方式"
          align="center"
          prop="reviewType_dictText"
          width="180px"
        />

        <el-table-column
          label="阅卷时间"
          width="320px"
          align="center"
        >

          <template v-slot="scope">
            <div v-if="scope.row.startTime && scope.row.endTime">
              {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
            </div>
            <div v-else>不限制</div>
          </template>

        </el-table-column>


        <el-table-column
          label="试卷总数"
          align="center"
          width="100px"
        >

          <template v-slot="scope">
            <span v-if="scope.row.assignState === 0">--</span>
            <span v-else>{{ scope.row.total }}</span>
          </template>

        </el-table-column>


        <el-table-column
          label="待阅试卷"
          align="center"
          width="100px">

          <template v-slot="scope">
            <span v-if="scope.row.assignState === 0">--</span>
            <span v-else>{{ scope.row.unrated }}</span>
          </template>

        </el-table-column>

        <el-table-column
          label="已阅试卷"
          align="center"
          width="100px"
        >
          <template v-slot="scope">
            <span v-if="scope.row.assignState === 0">--</span>
            <span v-else>{{ scope.row.reviewed }}</span>
          </template>

        </el-table-column>

        <el-table-column
          label="指派状态"
          align="center"
          width="120px"
          prop="assignState_dictText"
        />

        <el-table-column
          label="阅卷状态"
          align="center"
          width="120px"
          prop="reviewState_dictText"
        />

        <el-table-column
          label="操作"
          fixed="right"
          width="280px"
        >
          <template v-slot="{ row }">
            <el-link v-if="row.assignState===0" type="primary" icon="el-icon-video-play" style="margin-right: 10px" @click="handleStart(row.id)">立即指派</el-link>
            <el-link v-if="(row.assignState===1 || row.assignState===2) && row.reviewState!==100" type="warning" icon="el-icon-refresh-left" style="margin-right: 10px" @click="handleReInit(row.id)">再次指派</el-link>
            <el-link v-if="row.assignState > 0 && row.reviewState!==100" type="danger" icon="el-icon-video-pause" style="margin-right: 10px" @click="handleEnd(row.id)">结束阅卷</el-link>
            <el-link v-if="row.reviewState > 0 && row.assignState > 0" type="primary" icon="el-icon-finished" @click="toProgress(row.id)">阅卷情况</el-link>
          </template>

        </el-table-column>


      </template>

    </data-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      width="540px"
    >
      <div class="err-box">
        <div>发生了以下问题，请先处理后再提交阅卷任务：</div>
        <div style="color: #888; font-size: 12px">提示：阅卷人员角色应包含（reviewer）且用户状态为正常！</div>
      </div>
      <ul class="err-li">
        <li v-for="(item,index) in errorList" :key="index" style="color: #0A84FF; font-size: 13px; font-weight: 700">{{ item }}</li>
      </ul>

    </el-dialog>

    <el-dialog
      :visible.sync="initVisible"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      width="540px"
    >
      <div v-if="initType===0" class="err-box">
        <div>1、请确保所有考生已完成考试。</div>
        <div>2、提交后将按阅卷配置分配阅卷人员。</div>
        <div>3、指派结果将通过站内信发送，如有异常请手动处理。</div>
      </div>

      <div v-else class="err-box">
        <div>1、用于再次派发未指派的阅卷任务。</div>
        <div>2、若勾选【清除数据】会清除所有阅卷老师的批阅记录，重新分派阅卷任务，请谨慎勾选。</div>
      </div>

      <el-form ref="postForm" :model="postForm" label-position="left" label-width="80px">

        <el-form-item v-if="initType===0" label="立即批阅" prop="startReview">
          <el-checkbox v-model="postForm.startReview" /> 勾选后，阅卷老师可以立即开始阅卷。
        </el-form-item>

        <el-form-item label="清除数据" prop="clearAll">
          <el-checkbox v-model="postForm.clearAll" /> 勾选后，将清除全部已经批阅的数据，请谨慎勾选。
        </el-form-item>

        <el-form-item prop="points" label="确认操作">
          <el-checkbox v-model="postForm.confirm" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="initVisible = false">取 消</el-button>
        <el-button :loading="loading" :disabled="!postForm.confirm" type="primary" @click="doInit">确 定</el-button>
      </div>

    </el-dialog>


  </div>


</template>

<script>
import DicListSelect from '@/components/DicListSelect/index.vue'
import { reviewInit, reviewSettle } from '@/api/exam/review'

export default {
  name: 'AdminPreview',
  components: { DicListSelect },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          state: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/exam/review/review/paging-admin'
      },

      // 错误提示
      dialogVisible: false,
      errorList: [],

      loading: false,
      initType: 0,
      initVisible: false,
      postForm: {
        id: null,
        confirm: false,
        startReview: false,
        clearAll: false
      }
    }
  },
  activated() {
    this.$refs.pagingTable.refresh()
  },
  methods: {

    // 显示错误信息
    showError(errorList) {
      this.errorList = errorList
      this.dialogVisible = true
    },
    toProgress(id) {
      this.$router.push({ name: 'ReviewPaperList', query: { examId: id }})
    },

    doInit() {
      this.loading = true
      reviewInit(this.postForm).then(res => {
        const data = res.data
        if (data.pass) {
          this.$message({
            type: 'success',
            message: '操作成功，后台正在派发阅卷任务，请稍后刷新列表查看状态！'
          })
        } else {
          this.showError(data.errorList)
        }
        this.loading = false
        this.initVisible = false
      })
    },

    // 初次初始化
    handleStart(id) {
      this.initType = 0
      this.postForm.id = id
      this.postForm.startReview = false
      this.postForm.confirm = false
      this.postForm.clearAll = false
      this.initVisible = true
    },

    // 结束阅卷
    handleEnd(id) {
      this.$msg.confirm(this, '确认要立即结束阅卷工作吗？', ['1、请确保所有阅卷老师已经批阅完成。', '2、结束后阅卷老师不能再继续批阅或纠正。', '3、后台将自动进行分数汇算并出分。', '4、请输入【结束阅卷】来进一步确认操作。'], '结束阅卷').then(() => {
        reviewSettle(id).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功，后台正在汇算成绩!'
          })
        })
      })
    },

    // 重新指派
    handleReInit(id) {
      this.initType = 1
      this.postForm.id = id
      this.postForm.startReview = false
      this.postForm.confirm = false
      this.postForm.clearAll = false
      // this.$forceUpdate()

      this.initVisible = true
    }

  }
}
</script>

<style scoped>

::v-deep .el-alert{
  padding: 5px;
  margin-top: 10px;
  line-height: 18px;
  font-size: 12px;
}

.el-form-item {
 margin-bottom: 0;
}
</style>
